<template>
  <div class="ui-content">
    <div class="search_box flex-between">
      <a class="qiandao" href=""></a>
      <div class="sexrch_cont flex-star">
        <svg class="icon sao" aria-hidden="true">
          <use xlink:href="#icon-sao"></use>
        </svg>
        <div class="input_tips">搜索你喜欢的物品</div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-paishe"></use>
        </svg>
        <input type="button" name="" id="" value="搜索" />
      </div>
    </div>
    <div class="page_nav flex-star">
      <div class="nav_item_cont flex-star">
        <div class="nav_item">首页</div>
        <div class="nav_item">饰品</div>
        <div class="nav_item">医药</div>
        <div class="nav_item">进口</div>
        <div class="nav_item">女装</div>
        <div class="nav_item">首饰</div>
        <div class="nav_item">首饰</div>
        <div class="nav_item">首饰</div>
        <div class="nav_item">首饰</div>
        <div class="nav_item">首饰</div>
        <div class="nav_item">首饰</div>
      </div>
      <svg class="icon muen" aria-hidden="true">
        <use xlink:href="#icon-caidan"></use>
      </svg>
    </div>

    <div class="navimg_cont flex-star">
      <div class="navimg_item">
        <img src="../../assets/img/login_logo.png">
        <p>推荐新品</p>
      </div>
      <div class="navimg_item">
        <img src="./../../assets/img/login_logo.png">
        <p>推荐新品</p>
      </div>
      <div class="navimg_item">
        <img src="./../../assets/img/login_logo.png">
        <p>推荐新品</p>
      </div>
      <div class="navimg_item">
        <img src="./../../assets/img/login_logo.png">
        <p>推荐新品</p>
      </div>
      <div class="navimg_item">
        <img src="./../../assets/img/login_logo.png">
        <p>推荐新品</p>
      </div>
      <div class="navimg_item">
        <img src="./../../assets/img/login_logo.png">
        <p>推荐新品</p>
      </div>
      <div class="navimg_item">
        <img src="./../../assets/img/login_logo.png">
        <p>推荐新品</p>
      </div>
      <div class="navimg_item">
        <img src="./../../assets/img/login_logo.png">
        <p>推荐新品</p>
      </div>
      <div class="navimg_item">
        <img src="./../../assets/img/login_logo.png">
        <p>推荐新品</p>
      </div>
      <div class="navimg_item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-gengduo"></use>
        </svg>
        <p>推荐新品</p>
      </div>
    </div>


    <div class="swiper_cont">

      <!--  <div class="swiper-container">
        	<div class="swiper-pagination"></div>
        	<div class="swiper-wrapper">
        		<div class="swiper-slide">
        			<img src="../../assets/img/goods_img.png" >
        		</div>
        		<div class="swiper-slide">
        			<img src="../../assets/img/goods_img.png" >
        		</div>
        	 </div>
        </div> -->

    </div>
    <div class="icon_cont flex-star">
      <a href="" class="icon_item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-posxinpin2"></use>
        </svg>
        <p>推荐新品</p>
      </a>
      <a href="" class="icon_item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xinpin"></use>
        </svg>
        <p>今日上新</p>
      </a>
      <a href="" class="icon_item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shangcheng1"></use>
        </svg>
        <p>国际商城</p>
      </a>
      <a href="" class="icon_item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tubiaozhizuomoban-"></use>
        </svg>
        <p>每日好店</p>
      </a>
      <a href="" class="icon_item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jd_jiangpai"></use>
        </svg>
        <p>信任专享</p>
      </a>
      <a href="" class="icon_item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-qiandao"></use>
        </svg>
        <p>每日签到</p>
      </a>
      <a href="" class="icon_item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jifen"></use>
        </svg>
        <p>积分兑换</p>
      </a>
      <a href="" class="icon_item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zhuceye_ruzhuchenggongdapx"></use>
        </svg>
        <p>商家入驻</p>
      </a>
      <a href="" class="icon_item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-guanyuwomen"></use>
        </svg>
        <p>关于我们</p>
      </a>
      <a href="" class="icon_item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xinwenzhongxin"></use>
        </svg>
        <p>新闻中心</p>
      </a>
    </div>
    <img class="center_img" src="../../assets/img/center_img.png">

    <div class="mafan_area flex-star">
      <div class="mafan_item">
        <div class="mafan_tit">
          <span>聚划算</span>
          <div></div>
        </div>
        <div class="mfan_box flex-between">
          <div class="mfan_cont">
            <p>抢购</p>
            <img src="../../assets/img/benz.png">
          </div>
          <div class="mfan_cont">
            <p>抢购</p>
            <img src="../../assets/img/benz.png">
          </div>
        </div>
      </div>
      <div class="mafan_item">
        <div class="mafan_tit flex-star">
          <span>聚划算</span>
          <div>live></div>
        </div>
        <div class="mfan_box">
          <p>宠粉大额卷</p>
          <div class="mfan_box_img flex-between">
            <img src="../../assets/img/shext.png">
            <img src="../../assets/img/makf.png">
          </div>
        </div>
      </div>
      <div class="mafan_item">
        <div class="mafan_tit flex-star">
          <span class="flex-center">聚</span>
          <p>百亿补贴</p>
          <div>百亿补贴</div>
        </div>
        <div class="mfan_box flex-between">
          <div class="mfan_cont">
            <img src="../../assets/img/btnm.png">
            <p>￥999</p>
          </div>
          <div class="mfan_cont">
            <img src="../../assets/img/btnm.png">
            <p>￥999</p>
          </div>
        </div>
      </div>
      <div class="mafan_item">
        <div class="mafan_tit flex-star">
          <span>聚划算</span>
          <div>品质好物</div>
        </div>
        <div class="mfan_box">
          <p>宠粉大额卷</p>
          <div class="mfan_box_img flex-between">
            <img src="../../assets/img/shext.png">
            <img src="../../assets/img/makf.png">
          </div>
        </div>
      </div>
      <div class="mafan_item">
        <div class="mafan_tit">
          <span>聚划算</span>
          <div></div>
        </div>
        <div class="mfan_box flex-between">
          <div class="mfan_cont">
            <p>抢购</p>
            <img src="../../assets/img/benz.png">
          </div>
          <div class="mfan_cont">
            <p>抢购</p>
            <img src="../../assets/img/benz.png">
          </div>
        </div>
      </div>
      <div class="mafan_item">
        <div class="mafan_tit flex-star">
          <span>聚划算</span>
          <div>精选</div>
        </div>
        <div class="mfan_box">
          <p>宠粉大额卷</p>
          <div class="mfan_box_img flex-between">
            <img src="../../assets/img/shext.png">
            <img src="../../assets/img/makf.png">
          </div>
        </div>
      </div>

    </div>

    <div class="jingx_tit flex-between">
      <div class="flex-star">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xuanzhong"></use>
        </svg>
        <span>精选</span>
      </div>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-caidan"></use>
      </svg>
    </div>
    <div class="goods_area flex-star">
      <div class="goods_item">
        <img src="../../assets/img/gj_goods_img.png">
        <div class="goods_tit wordNoWarp">
          挂脖晚礼服裙女气场女 神长裙
        </div>
        <div class="tag_box">
          <span>满288减99：店铺券</span>
        </div>
        <div class="price_num flex-between">
          <div class="flex-star">
            <div>￥299</div>
            <span>40人付款</span>
          </div>
        </div>
      </div>
      <div class="goods_item">
        <img src="../../assets/img/gj_goods_img.png">
        <div class="goods_tit wordNoWarp">
          挂脖晚礼服裙女气场女 神长裙
        </div>
        <div class="tag_box">
          <span>满288减99：店铺券</span>
        </div>
        <div class="price_num flex-between">
          <div class="flex-star">
            <div>￥299</div>
            <span>40人付款</span>
          </div>
        </div>
      </div>
      <div class="goods_item">
        <img src="../../assets/img/gj_goods_img.png">
        <div class="goods_tit wordNoWarp">
          挂脖晚礼服裙女气场女 神长裙
        </div>
        <div class="tag_box">
          <span>满288减99：店铺券</span>
        </div>
        <div class="price_num flex-between">
          <div class="flex-star">
            <div>￥299</div>
            <span>40人付款</span>
          </div>
        </div>
      </div>
      <div class="goods_item">
        <img src="../../assets/img/gj_goods_img.png">
        <div class="goods_tit wordNoWarp">
          挂脖晚礼服裙女气场女 神长裙
        </div>
        <div class="tag_box">
          <span>满288减99：店铺券</span>
        </div>
        <div class="price_num flex-between">
          <div class="flex-star">
            <div>￥299</div>
            <span>40人付款</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <navbar></navbar> -->
  </div>
</template>

<script>
  export default {
    name:'home',
    data() {
      return {

      }
    },
    mounted() {}
  }
</script>

<style scoped="scoped">
  .search_box {
    height: .95rem;
    background: white;
    padding: .25rem .24rem 0 .24rem;
  }

  .qiandao {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    background: url(../../assets/img/gjscIndexqiaodao_icon.png);
    background-size: 100% 100%;
  }

  .sexrch_cont {
    height: .7rem;
    width: calc(100% - 1rem);
    border: .02rem solid #14aad1;
    border-radius: .7rem;
    position: relative;
    padding: 0 .3rem;
  }

  .sexrch_cont svg {
    width: .4rem;
    height: .4rem;
    fill: #ccc;
  }

  .sexrch_cont input[type=button] {
    width: 1.4rem;
    height: 100%;
    background: #14aad1;
    color: white;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: .7rem;
    border: none;
  }

  .input_tips {
    color: #666;
    font-size: .3rem;
    margin: 0 .5rem 0 .3rem;
  }

  .page_nav {
    background: white;
    position: relative;
  }

  .nav_item_cont {
    padding: .25rem .24rem .25rem .24rem;
    overflow: scroll;
  }

  .nav_item {
    white-space: nowrap;
  }

  .page_nav .nav_item:nth-child(n + 2) {
    margin-left: .4rem;
  }

  .page_nav .muen {
    width: .75rem;
    height: 100%;
    z-index: 1;
    position: absolute;
    background: white;
    right: 0;
    top: 0;
    padding: .1rem .2rem .1rem .1rem;
  }

  .swiper-slide {
    font-size: 0;
  }

  .swiper-slide img {
    width: 100%;
  }

  .swiper_cont {
    padding: 0 .24rem;
  }

  .icon_cont {
    padding: .15rem .24rem;
    flex-wrap: wrap;
    background: white;
  }

  .icon_item {
    width: 20%;
    display: inline-block;
    text-align: center;
    height: 1.25rem;
    font-size: 0;
  }

  .icon_item svg {
    width: .7rem;
    height: .7rem;
  }


  .icon_cont .icon_item:nth-child(1) svg {
    fill: #ff4d00;
  }

  .icon_cont .icon_item:nth-child(2) svg {
    fill: #ff1f00;
  }

  .icon_cont .icon_item:nth-child(3) svg {
    fill: #1afa29;
  }

  .icon_cont .icon_item:nth-child(4) svg {
    fill: #19b1ff;
  }

  .icon_cont .icon_item:nth-child(5) svg {
    fill: #ff41fd;
  }

  .icon_cont .icon_item:nth-child(6) svg {
    fill: #3ebf2b;
  }

  .icon_cont .icon_item:nth-child(7) svg {
    fill: #ffc711;
  }

  .icon_cont .icon_item:nth-child(8) svg {
    fill: #ff9c00;
  }

  .icon_cont .icon_item:nth-child(9) svg {
    fill: #ff2254;
  }

  .icon_cont .icon_item:nth-child(10) svg {
    fill: #0096ff;
  }

  .navimg_cont {
    flex-wrap: wrap;
    background: white;
    width: calc(100% - .48rem);
    margin: 1px .24rem .2rem .24rem;
    padding: .3rem 0;
    border-radius: 6px;
  }

  .navimg_cont .navimg_item:nth-child(n + 6) {
    margin-top: .2rem;
  }

  .navimg_cont svg {
    width: 1rem;
    height: 1rem;
    fill: #999;
  }

  .navimg_item {
    width: 20%;
    padding: 0 .2rem;
    text-align: center;
  }

  .navimg_item p {
    white-space: nowrap;
    font-size: .24rem;
  }

  .navimg_item img {
    width: 1rem;
    height: 1rem;
  }




  .icon_cont .icon_item:nth-child(n + 6) {
    margin-top: .1rem;
  }

  .icon_item p {
    font-size: .28rem;
    margin-top: .1rem;
  }

  .center_img {
    width: calc(100% - .48rem);
    margin: .15rem .24rem;
  }

  .mafan_area {
    margin: .2rem .24rem;
    background: white;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
  }

  .mafan_area::before {
    content: "";
    height: 100%;
    width: 1px;
    background: #eee;
    left: 50%;
    position: absolute;
  }

  .mafan_item {
    padding: .2rem .24rem;
    width: 50%;
  }

  .mafan_tit {
    color: #333;
    font-size: .32rem;
    font-weight: bold;
  }

  .mfan_box .mfan_cont {
    width: calc(50% - .15rem);
    background: #f5fdff;
    padding: .15rem;
    text-align: center;
  }

  .mfan_box .mfan_cont img {
    height: 1.2rem;
    margin-top: .2rem;
  }

  .mafan_area .mafan_item:nth-child(2n + 1) .mfan_cont p {
    text-align: left;
    color: #ff3d4c;
    font-size: .3rem;
  }

  .mafan_area div.mafan_item:nth-child(2n + 2) .mfan_box p {
    text-align: left;
    font-size: .24rem;
  }

  .mfan_box_img {
    padding: 0 .2rem;
  }

  .mfan_box_img img {
    height: 1.4rem;
    margin: .2rem 0;
  }

  .mafan_area .mafan_item:nth-child(2) .mafan_tit div {
    padding: .01rem .1rem;
    margin-left: .1rem;
    font-weight: 400;
    background: #fdcc09;
    color: white;
    border-radius: 3px;
    font-size: .24rem;
  }

  .mafan_area .mafan_item:nth-child(3) .mafan_tit {
    color: #ff4f23;
  }

  .mafan_area .mafan_item .mafan_tit {
    margin-bottom: .1rem;
  }

  .mafan_area .mafan_item:nth-child(3) .mafan_tit span {
    border-radius: 4px;
    color: white;
    width: .4rem;
    height: .4rem;
    margin-right: .1rem;
    background: #ff4f23;
  }

  .mafan_area .mafan_item:nth-child(3) .mafan_tit div {
    background: #ff4f23;
    color: white;
    font-size: .24rem;
    padding: 0 .05rem;
    border-radius: 3px;
    margin-left: .1rem;
  }

  .mafan_area div.mafan_item:nth-child(3) .mfan_cont p {
    text-align: center;
  }

  .mafan_area .mafan_item:nth-child(4) .mafan_tit div {
    background: #14aad1;
    color: white;
    font-size: .24rem;
    padding: 0 .05rem;
    border-radius: 3px;
    margin-left: .1rem;
  }

  .mafan_area .mafan_item:nth-child(4) .mfan_box p {
    color: #14aad1;
  }

  .mafan_area div.mafan_item:nth-child(5) .mfan_cont p {
    color: #14aad1;
    font-size: .3rem;
  }

  .mafan_area .mafan_item:nth-child(6) .mafan_tit div {
    background: #262261;
    font-weight: 400;
    color: white;
    font-size: .24rem;
    padding: 0 .05rem;
    border-radius: 3px;
    margin-left: .1rem;
  }

  .mafan_area div.mafan_item:nth-child(6) .mfan_box p {
    color: #262261;
  }

  /* 精选 */
  .jingx_tit {
    padding: .25rem .24rem;
  }

  .jingx_tit {
    font-size: .4rem;
  }

  .jingx_tit .flex-star span {
    font-size: .3rem;
    margin-left: .05rem;
  }

  .jingx_tit .flex-star svg {
    fill: #14aad1;
  }

  .goods_area {
    padding: 0 .24rem;
    flex-wrap: wrap;
  }

  .goods_area .goods_item {
    width: calc(50% - .1rem);
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    padding-bottom: .2rem;
    border-radius: 6px;
    overflow: hidden;
  }

  .goods_area .goods_item:nth-child(2n) {
    margin-left: .2rem;
  }

  .goods_area .goods_item:nth-child(2n) .tag_box span {
    border: none;
    color: #fdcc09;
  }

  .goods_area .goods_item:nth-child(n + 3) {
    margin-top: .2rem;
  }

  .goods_area .goods_item img {
    width: 100%;
  }

  .goods_tit {
    color: #333;
    font-size: .3rem;
    padding: 0 .15rem;
  }

  .tag_box {
    padding: .15rem;
  }

  .tag_box span {
    display: inline-block;
    padding: .02rem;
    border: 1px solid #ff3d4c;
    border-radius: 4px;
    color: #ff3d4c;
  }

  .price_num {
    padding: .1rem .15rem;
  }
</style>
